<%@page import="com.mmy.domain.sys.TSysUser"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<% TSysUser tSysUser = (TSysUser) session.getAttribute("tSysUser");
String sessionCity = (String) session.getAttribute("sessionCity");%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=m0pl5GajRZ2XO8b73b3myC9GOMlch05X"></script>
<script type="text/javascript" src="js/web.js"></script>
<link rel="stylesheet" type="text/css" href="js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="js/easyui/themes/icon.css">
<script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/easyui/locale/easyui-lang-zh_CN.js"></script>
<script src="js/axios.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/cityPicker.css">
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<header id="header" class="header at-padding-large-top at-padding-large-bottom">
	<div class="container">
		<div class="at-float-right width34">
			<c:choose>
				<c:when test="${tSysUser != null}">
				<div id="allmap">
							</div>
								<input type="text" id="cityChoice"  >
								<input type="hidden" id="province" value="">
								<input type="hidden" id="city" value="">
								<div class="at-float-right margin-left15">
					<ul class="perul" >
						<li><a href="perinfo" class="per">${tSysUser.getUserAccount() } </a>
							<div class="personalpop">
								<div class="perleft">
								 <c:if test="${tSysUser.getPhotoPath() !=null }">
                            <img id="imges" alt="" src="">
                        </c:if>
								</div>
								<div class="perright">
									<a href="perinfo">个人信息</a>
									<a href="toupdatepassword">修改密码</a>
									<a href="myscenicreserve">购物车</a>
									<a href="logout"><button class="perbtn">退出登录</button></a>
								</div>
							</div>
							</li>
					</ul>
				</div>
				</c:when>
				<c:otherwise>
				<div>

				<!-- 地址  -->
				<div id="allmap"></div>
				<input type="text" id="cityChoice" class="location" style="border: none;cursor:pointer;margin-top: 5px;width: 30%;margin-left:20%;" >
				<input type="hidden" id="province" value="">
				<input type="hidden" id="city"  value="">
				<div class="at-float-right" style="margin-left:15%;">		
				<div class="login-signup " >
				<a class="cd-signup" href="#0" onclick="regShow()">注册</a>
				<a class="cd-signin" href="#0" onclick="loginShow()">登录</a>	
				</div>
					</div>
						</div>
				</c:otherwise>
			</c:choose>
		</div>
		<!-- Logo -->
		<div class="at-float-left" style="width:21%">
			<a href="/mmy/" id="logo"> <img class="logo"
				src="img/页眉LOGO.png" alt="Mmy Html Theme" />
			</a>
		</div>
		<div id="index-search">
				<input type="text" id="index-search-input" value="" placeholder="关键字/城市名称/旅游天数"/>
				<button id="index-search-btn"  ><img src="img/index-search.png" style="width:100%;"></img></button>
		</div>	
	</div>

	<div class="index-menu cbp-af-header">
		
<div class="container">
			<div class="wrap">
				<nav id="nav"> </nav>
			</div>
		</div>
	</div>
	</header>
	
	<!-- 登录注册开始 -->

	<div class="cd-user-modal">
		<div class="cd-user-modal-container">
			<!-- this is the container wrapper -->
			<ul class="cd-switcher">
				<li id="loginOnclick"><a href="#0">登录</a></li>
				<li id="regOnclick"><a href="#0">注册新用户</a></li>
			</ul>
			<div id="cd-login">
				<!-- log in form -->
				<form class="cd-form" action="login" method="post">
					<p class="fieldset">
						<label class="image-replace cd-phone-email-loginname"
							for="signin-phone-email-loginname">手机号/用户名/邮箱</label>
							<input class="full-width has-padding has-border" id="signin-phone-email-loginname"
							name="AccountMobileEmail" type="text"
							placeholder="用户名/手机号/邮箱">
					</p>
					<p class="fieldset">
						<label class="image-replace cd-password" for="signin-password">密码</label>
						<input class="full-width has-padding has-border"
							id="signin-password" name="Password" type="password"
							placeholder="密码"> <a href="#0" class="hide-password">显示</a>
					</p>
					<p class="fieldset">
						<input class="full-width btn" type="button" value="登录" onclick="dologin()">
					</p>
				</form>
				
				<p class="cd-form-bottom-message">
					<a href="#0">忘记密码?</a>
				</p>
				<!-- <a href="#0" class="cd-close-form">Close</a> -->
			</div>
			<!-- cd-login -->
			<div id="cd-signup">
				<!-- sign up form -->
				<button class="btn" id="memberbtn" onclick="checkMemberBtn()">游客</button>
				<button class="btn" id="staffbtn" onclick="checkStaffBtn()">员工</button>
				<button class="btn" id="staffbtn" onclick="location.href='tourwelcome'">旅行社</button>
				<button class="btn" id="staffbtn" onclick="location.href='tourwelcome2'">营业部</button>
			
				<!-- <a href="#0" class="cd-close-form">Close</a> -->
				
				<form class="cd-form" action="reg" name="register" method="post" onSubmit="return registerSubmit(this);">
					<p class="fieldset">
						<label class="image-replace cd-useraccount"
							for="signup-useraccount">用户登录名</label> <input
							class="full-width has-padding has-border" id="signup-useraccount" maxlength="32"
							name="UserAccount" type="text" placeholder="用户登录名（必填）" 
							required="required" > <span class="mustWrite">*</span>
					</p>
					<p class="fieldset">
						<label class="image-replace cd-username" for="signup-username">用户真实姓名</label>
						<input class="full-width has-padding has-border"
							id="signup-username" name="UserName" type="text" maxlength="16"
							placeholder="真实姓名（必填）" required="required"><span class="mustWrite">*</span>
					</p>
					<p class="fieldset">
						<label class="image-replace cd-phone" for="signup-phone">用户手机号</label>
						<input class="full-width has-padding has-border" id="signup-phone" maxlength="16"
							name="UserMobile" type="text" placeholder="手机号（必填）"
							required="required" ><span class="mustWrite">*</span>
					</p>
					<p class="fieldset">
						<label class="image-replace cd-mail" for="signup-mail">用户邮箱</label>
						<input class="full-width has-padding has-border" id="signup-mail" maxlength="64"
							name="Mail" type="text" placeholder="邮箱(必填)" required="required"
							><span class="mustWrite">*</span>
					</p>
					<p class="fieldset">
						<label class="image-replace cd-password" for="signup-password">密码</label>
						<input class="full-width has-padding has-border" 
							id="signup-password" name="PassWord" type="password" maxlength="32"
							placeholder="密码（必填）" required="required"
							> <a href="#0"
							class="hide-password">显示</a><span class="mustWrite">*</span>
						</p>
					<p class="fieldset">
						<label class="image-replace cd-password" for="signup-repassword">确认密码</label>
						<input class="full-width has-padding has-border"
							id="signup-repassword" name="RePassword" type="password" maxlength="32"
							placeholder="确认密码（必填）" required="required"
							> <a href="#0"
							class="hide-password">显示</a><span class="mustWrite">*</span>
					</p>
					<p class="fieldset">
						<label class="image-replace cd-identity" for="signup-identity">身份证号</label>
						<input class="full-width has-padding has-border"
							id="signup-identity" name="Identity" type="text" maxlength="24"
							placeholder="身份证号码（必填）" required="required"
						><span class="mustWrite">*</span>
					</p>
					<p class="fieldset">
						
						<input  class="marginleft1" type="radio"  name="Sex" value="0" /><label >男</label>
						<input  class="marginleft2" type="radio"  name="Sex" value="1" checked /><label>女</label>
					</p>
					 <p class="fieldset">
							<label class="image-replace cd-orgID" for="signup-orgID">所属公司</label>
							<select class="full-width has-padding has-border"
								style="text-align-last: center;" name="OrgID" id="signup-orgID">
								<c:forEach items="${lstSysOrg}" var="lstSysOrg" varStatus="status">           				 
									<option value="${lstSysOrg.getOrgID() }">
										<label>${lstSysOrg.getOrgName() }</label>
									</option>
								</c:forEach>
							</select>					
						</p> 
				<div id="stafftype">
						<p class="fieldset">
						<label class="image-replace cd-jobType" for="signup-jobType">员工类型</label>
							<select class="full-width has-padding has-border" id="signup-jobType" style="text-align-last: center;" name="strUserType">
								<option value="">请选择员工类型</option>
								<option value="1">员工</option>
								<option value="2">导游</option>
								<option value="3">司机</option>
								<option value="4">主播</option>
							</select>
						</p>
						<p class="fieldset">
						<label class="image-replace cd-userJob" for="signup-userjob">职位</label>
						<input class="full-width has-padding has-border"
							id="signup-userjob" name="Job" type="text" maxlength="64"
							placeholder="职位" >
					</p>
						<!-- 上传证件照片   -->
					<p class="fieldset">
							<label class="image-replace cd-cade" for="signup-cade">上传证件</label>
							<input class="full-width has-padding has-border" id="signup-cadePath" name="CadePath" type="file" >							
						</p>  
				
				</div> 
					<p class="fieldset">
						<label class="image-replace cd-upUserID" for="signup-upUserID">推荐人编码</label>
						<input class="full-width has-padding has-border"
							id="signup-upUserID" name="strUpUserID" type="number"
							placeholder="推荐人编码（非必填）" onblur="checkUpUserID(this.value)">
					</p>
					<p class="fieldset">
					<div class="option-container">
						<input type="checkbox" name="option[]" id="accept-terms" onclick="checkbtn3()">
						<label for="accept-terms">我已同意该 <a href="#modal-popup"
							class="modal">用户协议</a></label>
						<div id="modal-popup" class="white-popup-block mfp-hide">
							<h3>用户协议</h3>
							<!-- <p></p> -->
							<p>
								<a class="popup-modal-dismiss" href="#">返回</a>
							</p>
						</div>
						<div id="modal-popup-a" class="white-popup-block mfp-hide">
							<p>请先勾选用户协议</p>
							<p>
								<a class="popup-modal-dismiss" href="#">确定</a>
							</p>
						</div>
					</div>
					</p>
					<p class="fieldset">
						<a href="#modal-popup-a" class="mpa">
							<input class="full-width has-padding btn-secondary" type="submit" value="注册">
						</a>
					</p>
				</form>
					
			</div>
			<!-- cd-signup -->
			<div id="cd-reset-password">
				<!-- reset password form -->
				<p class="cd-form-message">登录验证</p>
				<form class="cd-form">
					<p class="fieldset">
						<!--<label class="image-replace cd-email" for="reset-email">电子邮箱</label>-->
						<input class="full-width has-padding has-border" name="option[]"
							id="reset-phone" type="text" placeholder="手机号">
					</p>
					<p class="fieldset">
					<div id="captcha">
						<input class="full-width has-padding has-border" name=""
							id="reset-captcha" type="text" placeholder="验证码">
						<div id="send-captcha">
							<a href="#0">发送验证码</a>
						</div>
					</div>
					</p>
					<p class="fieldset">
						<input class="full-width has-padding has-border" name="option[]"
							id="reset-password" type="text" placeholder="输入新密码">
					</p>
					<p class="fieldset">
						<input class="full-width has-padding btn-light" type="submit"
							value="重置密码">
					</p>
				</form>
	
				<p class="cd-form-bottom-message">
					<a href="#0">返回登录页面</a>
				</p>
			</div>
			<!-- cd-reset-password -->
			<a href="#0" class="cd-close-form">Close</a>
		</div>
		<!-- cd-user-modal-container -->
	</div>

	<!--  登录注册结束-->
	<script type="text/javascript" src="js/cityData.js"></script>
	<script type="text/javascript" src="js/cityPicker.js"></script>
	<script type="text/javascript">
	function dologin(){
		var name = $("#signin-phone-email-loginname").val();
		var password = $("#signin-password").val();
		if(name == ""){
			$.messager.alert('失败','账号不能为空!','error');
			return;
		}else if(password == ""){
			$.messager.alert('失败','密码不能为空!','error');
			return;
		}
		axios.post('login',{
			num:name,
			pass:password
		})
		.then(res => {
			let code = res.data.code
			switch(code){
				case 400:
					$.messager.alert('失败','账号不存在!','error');
					break;
				case 300:
					$.messager.alert('失败','账号待审核!','error');
					break;
				case 200:
					$.messager.alert('失败','账号或密码有误!','error');
					break;
				case 100:
					location.href = "/mmy";
					break;
			}
		})
        .catch(error =>console.log(error))	
	}

	//注册时切换游客员工
	function checkMemberBtn(){
		document.getElementById("stafftype").style.display = "none";
		document.getElementById("memberbtn").style.background= "#476e4d";
		document.getElementById("staffbtn").style.background= "#25BB40";
		$('#signup-jobType').attr('required', false);
	} 
	function checkStaffBtn(){
		document.getElementById("stafftype").style.display = "block";
		document.getElementById("staffbtn").style.background= "#476e4d";
		document.getElementById("memberbtn").style.background= "#25BB40";
		$('#signup-jobType').attr('required', true);
	}	
	// 导航
	window.onload = function(){	
		$.ajax({
			url: "/mmy/loadfrontmenu",
			type: "post",
			dataType : "json",
			data :"",
			success : function (reslist){
				var res=reslist.menu;
				var ul=$("<ul class='nav' id='parUl'></ul>");
				for(var i=0;i < res.length;i++){
					var node=res[i];
					var li=$("<li class='nav-item' id='parLi"+i+"'></li>");
					var a=$("<a  href='"+node.url+"'>"+node.menuName+"</a>");
					li.append(a);
					ul.append(li);
				}
				$("#nav").append(ul);
			}       
		});	
	}  
	// 百度地图API功能
	var map = new BMap.Map("allmap");
	var point = new BMap.Point(116.331398,39.897445);
	map.centerAndZoom(point,12);
	var geolocation = new BMap.Geolocation();
	geolocation.getCurrentPosition(function(r){
		if(this.getStatus() == BMAP_STATUS_SUCCESS){
			var mk = new BMap.Marker(r.point);
			map.addOverlay(mk);
			map.panTo(r.point);
			var point = new BMap.Point(r.point.lng,r.point.lat);
			var geoc = new BMap.Geocoder();
			geoc.getLocation(point, function(rs){
				var addComp = rs.addressComponents;
				$("#cityChoice").val(addComp.city);
				
				var cityChecked=$("#cityChoice").val();
				$.ajax({
					url: "/mmy/sessioncity?city="+cityChecked,
					type: "post",
					dataType : "text",
					data :"",
					success : function (){
						console.log("自动获取");
					}
				});
			});
		}else {
			alert('failed'+this.getStatus());
		}        
	},{enableHighAccuracy: true})

	//地址选择器
	var cityPicker = new IIInsomniaCityPicker({
        data: cityData,
        target: '#cityChoice',
        valType: 'k-v',
        hideCityInput: '#city',
        hideProvinceInput: '#province',
        callback: function(city_id){
			console.log("主动选择");
			var cityChecked=$("#cityChoice").val();
			$.ajax({
				url: "/mmy/sessioncity?city="+cityChecked,
				type: "post",
				dataType : "text",
				data :"",
				success : function (){}
				});
		}
    });
    cityPicker.init();
	</script>
</body>
</html>